import React, { useEffect, useState } from 'react';
import Dropzone from './components/Dropzone';
import { GetFolderById } from '../services';
import { InbizIcon } from '@inbiz/utils';
import { TextWidget } from '@inbiz/react';

interface IProps {
  // 是否多选
  multiple?: boolean;
  // 文件夹id
  folderId: string | number;
  // 拖拽回调
  onChange?: (params: any) => void;
  // 自定义内容
  children?: any;
}

const Dragger = (props: IProps) => {
  const { multiple, folderId, onChange } = props;
  const [path, setPath] = useState('');

  useEffect(() => {
    if (folderId) {
      GetFolderById({ folderId }).then((res: { [key: string]: any }) => {
        const { folder } = res;
        const path = folder.namePath.split('\\').join('/');
        setPath(path);
      });
    }
  }, [folderId]);

  return (
    <div className="react-fine-uploader-dropzone-container">
      <Dropzone
        className="react-fine-uploader-gallery-dropzone"
        multiple={multiple}
        onChange={onChange}
      >
        {props.children}
        <div className="react-fine-uploader-gallery-dropzone-mask">
          <div className="react-fine-uploader-gallery-dropzone-content">
            <div className="react-fine-uploader-gallery-dropzone-icon">
              <InbizIcon
                type="icon-inbiz_basic-upload"
                style={{ fontSize: '20px', color: '#fff' }}
              />
            </div>
            <span className="react-fine-uploader-gallery-dropzone-title">
              <TextWidget>inbizUpload.uploadPosition</TextWidget> {path}
            </span>
          </div>
        </div>
      </Dropzone>
    </div>
  );
};

export default Dragger;
